<template>
	<view>
		<view class='order-tab-box'>
			<view class='order-tab' :class="tab_index == 0 ? 'order-tab-current' : ''" @tap='tab_click' data-index="0">全部</view>
			<view class='order-tab' :class="tab_index == 1 ? 'order-tab-current' : ''" @tap='tab_click' data-index="1">待付款</view>
			<view class='order-tab' :class="tab_index == 2 ? 'order-tab-current' : ''" @tap='tab_click' data-index="2">待发货</view>
			<view class='order-tab' :class="tab_index == 3 ? 'order-tab-current' : ''" @tap='tab_click' data-index="3">已发货</view>
			<view class='order-tab' :class="tab_index == 4 ? 'order-tab-current' : ''" @tap='tab_click' data-index="4">已收货</view>
		</view>
		<view class='order-list-box'>
			<scroll-view scroll-y @scrolltolower="loadMore">
				<view class='order-list' v-for="(item,index) in orderData" :key="index">
					<view class='order-status order-common' v-if="item.pay_status == 0">
						<view>未支付</view>
					</view>
					<view class='order-status order-common' v-else-if="item.pay_status == 1">
						{{item.order_state_text}}
					</view>
					<view v-if="pageType == 1" class='order-common order-mer'>{{item.seller}}</view>
					<view v-if="pageType == 2" class='order-common order-mer'>{{item.buy_info}}</view>
					<view class='good'>
						<view class='lease content-box' @tap="goDetails(item.pay_status,item.order_no)">
							<view class='lease-img'>
								<image :src='item.goods_img' mode="aspectFit"></image>
							</view>
							<view class='lease-info'>
								<view class='lease-title'>{{item.goods_name}}</view>
								<view class='lease-attr font-color-hs'>{{item.item_names}}</view>
							</view>
							<view class='lease-price'>
								<view class='lease-now'>¥{{item.pay_amount}}</view>
								<view class='lease-num font-color-hs'>x{{item.buy_num}}</view>
							</view>
						</view>
					</view>
					<view class='order-handle-box'>
						<view v-if="item.pay_amount!=null">
							<block v-if="pageType == 1">
								<view @tap="goDetails(item.pay_status,item.order_no)" v-if="item.pay_status == 0">
									<view class='order-handle dopay'>付款</view>
								</view>
								<view class='order-handle' @tap='handle_order(item.order_no,item.order_state)' v-if="item.pay_status == 1 && item.order_state == 3">确认收货</view>
							</block>
							<block v-if="pageType == 2">
								<view @tap="modifyPrice(item.order_no)" v-if="item.pay_status == 0 && userInfo.member_id == item.seller_id">
									<view class='order-handle'>修改金额</view>
								</view>
								<view class='order-handle' @tap='handle_order(item.order_no,item.order_state)' v-if="item.pay_status == 1 && item.order_state == 2">发货</view>
							</block>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="g-frame-mask" v-if="showPopup" @tap="closePopup"></view>
		<view class="g-frame" v-if="showPopup">
			<block v-if="type == 'expressNo'">
				<view class="m-frame-header">
					<view class="u-frame-title">填写快递单号</view>
					<image class="u-frame-close" src="../../static/icons/ydt/close.png" @tap="closePopup"></image>
				</view>
				<view class="m-frame-content">
					<view class="express-content">
						<view class="input"><input type="text" v-model="sendData.expressname" placeholder="请填写快递公司" /></view>
						<view class="input"><input type="text" v-model="sendData.expressID" placeholder="请填写运单号" /></view>
					</view>
				</view>
				<view class="m-frame-footer">
					<view class="u-reset" @tap="rest">重置</view>
					<view class="u-confirm" @tap="confirm">确定</view>
				</view>
			</block>
			<block v-if="type == 'modifyPrice'">
				<view class="m-frame-header">
					<view class="u-frame-title">修改价格</view>
					<image class="u-frame-close" src="../../static/icons/ydt/close.png" @tap="closePopup"></image>
				</view>
				<view class="m-frame-content">
					<view class="express-content">
						<view class="input"><input type="number" v-model="modifyData.price" placeholder="请输入价格" /></view>
					</view>
				</view>
				<view class="m-frame-footer">
					<view class="u-reset" @tap="rest">重置</view>
					<view class="u-confirm" @tap="confirm">确定</view>
				</view>
			</block>
		</view>
		
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<view class="m-no-data" v-if="showNodata">
			<image src="../../static/images/no_order.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import hl from '@/common/common.js';
	export default {
		data() {
			return {
				tab_index: 0,	// 显示头部内容索引
				page: 1,	// 当前页数
				totalPages: 1,	// 页数总数
				orderData: [],	// 订单数据
				loadtype: 'normal',	// 加载数据方式
				bIsShowLoading: false,
				showNodata: false,
				pageType:'',
				showPopup:false,
				sendData:{
					expressname:'',
					expressID:'',
					order_no:''
				},
				pay_again:false,
				type:'',
				modifyData:{
					order_no:'',
					price:''
				}
			}
		},
		onLoad({pageType}) {
			this.pageType = pageType
			this.get_order_list({});
			this.route_key = pageType == '1' ? '2' : '3';
			uni.removeStorageSync('pay_again')
			this.userInfo = uni.getStorageSync('userInfo')
		},
		onShow() {
			let that = this
			if(uni.getStorageSync('pay_again')){
				that.orderData = []
				switch(Number(that.tab_index)){
					case 0:
						that.get_order_list({});
					break;
					case 1:
						that.get_order_list({pay_status: 0});
					break;
				}
			}
		},
		methods: {
			closePopup(){
				this.showPopup = false
				this.rest()
			},
			// 获取订单列表			
			get_order_list(data){
				let that = this;
				let url = ''
				if(that.pageType == 1){
					url = 'transfer_order/buy_list'
				}else if(that.pageType == 2){
					url = 'transfer_order/sale_list'
				}
				that.bIsShowLoading = true;
				if(that.page <= that.totalPages){
					data.page = that.page;
					hl.get(url,data,true,function(res){
						that.bIsShowLoading = false;
						if (!res.data.data.length) {
							that.orderData = ''
							that.showNodata = true;
							return false;
						}
						if (that.loadtype == "plus") { // 上拉加载
							that.orderData = that.orderData.concat(res.data.data);
						} else {
							that.orderData = res.data.data;
							that.totalPages = res.data.total_pages;
							uni.stopPullDownRefresh();
						}
					});
				}else{
					that.bIsShowLoading = false
				}
			},
			// 选择显示的内容
			tab_click(e){
				let index = e.currentTarget.dataset.index;
				let data = {}
				if(index != this.tab_index) {
					this.page = 1;
					this.totalPages = 1;
					this.loadtype = 'normal';
					this.tab_index = index;
					this.showNodata = false;
					if(this.tab_index == 1){
						data.pay_status = 0
					}else if(this.tab_index != 0 && this.tab_index != 1){
						data.pay_status = 1
						data.order_state = this.tab_index
					}
					this.get_order_list(data);
				}
			},
			handle_order(order_no,order_state){
				let that = this;
				let sendurl = 'transfer_order/handle';
				switch(order_state){
					case 2:
						that.showPopup = true
						that.sendData.order_no = order_no
					break;
					case 3:
						that.type = 'expressNo'
						uni.showModal({
							title: '提示',
							content: '确认已收到货了吗？',
							success: function (res) {
								if (res.confirm) {
									hl.post(sendurl, {order_no: order_no,order_state:4}, true, function (res){
										hl.showToast(res.data.msg);
										if(res.data.code == 0){
											that.page = 1
											let data = {
												pay_status: 1,
												order_state: that.tab_index
											}
											setTimeout(function (){
												that.orderData = []
												that.get_order_list(data);
											}, 1000);
										}
									})
								}
							}
						})
					break;
				}
			},
			rest(){
				this.sendData.expressname = this.sendData.expressID = this.modifyData.price = ''
			},
			confirm(){
				let that = this
				that.sendData.order_state = 3
				that.bIsShowLoading = true
				switch(that.type){
					case 'expressNo':
						hl.post('transfer_order/handle', that.sendData, true, function (res){
							that.bIsShowLoading = false
							hl.showToast(res.data.msg,1500);
							if(res.data.code == 0){
								that.page = 1;
								let data = {pay_status: 1,order_state: that.tab_index};
								setTimeout(function (){
									that.orderData = []
									that.get_order_list(data);
									that.rest();
								}, 1500);
								that.showPopup = false
							}
						})
					break;
					case 'modifyPrice':
						hl.post('transfer_order/modifyPrice', that.modifyData, true, function (res){
							that.bIsShowLoading = false
							hl.showToast(res.data.msg,1500);
							if(res.data.code == 0){
								let data = {pay_status: 0,page:1};
								setTimeout(function (){
									that.orderData = []
									that.get_order_list(data);
									that.rest();
								}, 1500);
								that.showPopup = false
							}
						})
					break;
				}
				
			},
			// 查看详情或支付订单
			goDetails(pay_status,order_no){
				let that = this
				switch(that.pageType){
					case '1':
						uni.navigateTo({
							url:'/pages/transfer/entrust_progress?order_no=' + order_no + '&pay_status=' +  pay_status + '&member=1'
						})
					break;
					case '2':
						if(pay_status == 1){
							uni.navigateTo({
								url:'/pages/transfer/entrust_progress?order_no=' + order_no + '&pay_status=' +  pay_status + '&member=2'
								
							})
						}
					break;
				}
			},
			// 修改订单金额
			modifyPrice(order_no){
				let that = this
				that.showPopup = true
				that.type = 'modifyPrice'
				that.modifyData.order_no = order_no
			},
			loadMore(){
				let that = this
				let data = {}
				that.page++;
				that.loadtype = 'plus';
				if(that.tab_index == 1){
					data = {
						pay_status: 0
					}
				}else if(that.tab_index != 0 && that.tab_index != 1){
					data = {
						pay_status: 1,
						order_state: that.tab_index
					}
				}
				that.get_order_list(data);
			}
		},
		// 下拉刷新
		onPullDownRefresh(){
			let that = this
			that.page = 1;
			that.totalPages = 1;
			that.loadtype = 'normal';
			if(that.tab_index == 1){
				data = {
					pay_status: 0
				}
			}else if(that.tab_index != 0 && that.tab_index != 1){
				data = {
					pay_status: 1,
					order_state: that.tab_index
				}
			}
			that.get_order_list(data);
		},
		// 上拉加载
		onReachBottom(){
			this.loadMore()
		}
		
	}
</script>
<style>
	.order-tab-box {
		height: 90rpx;
		width: 100%;
		background: #f8f8f8;
		display: flex;
		display: -webkit-flex;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}

	.order-tab {
		height: 100%;
		line-height: 90rpx;
		flex: 1;
		-webkit-flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #666
	}

	.order-tab-current {
		color: #bea374;
		height: 88rpx;
		border-bottom: 1px solid #bea374;
		width: auto;
	}

	.order-list-box {
		width: 100%;
		height: 100%;
		overflow: hidden;
		margin-top: 91rpx;
	}

	.order-list {
		width: 95%;
		height: 489rpx;
		border: 2rpx solid #ececec;
		background: #fff;
		margin: 0 auto;
		margin-top: 14rpx;
		position: relative;
	}
	.product_down{
		background-image: url('~@/static/images/jewel/product_down.png');
		background-size: 100%;
		background-repeat: no-repeat;
		width: 135rpx;
		height: 135rpx;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
	}
	.order-common {
		height: 84rpx;
		width: 100%;
		background: #f6f6f6;
		line-height: 84rpx;
		font-size: 28rpx;
		color: #bea374;
		text-indent: 22rpx;
		border-bottom: 1rpx solid #ececec
	}

	.order-mer {
		background: #fff;
		color: #3c3c3c;
		height: 97rpx;
		line-height: 97rxp;
	}

	.good {
		height: 200rpx;
		overflow: hidden;
		border-bottom: 1px solid #ddd;
		margin-top: 30rpx;
	}

	.lease {
		height: 100%;
		overflow: hidden;
		width: 95%;
		margin: 0 auto;
	}

	.lease-img {
		float: left;
		width: 144rpx;
		height: 144rpx;
		border: 1px solid #c8c8c8;
		margin-right: 21rpx;
		overflow: hidden;
	}

	.lease-img image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.lease-info {
		width: 370rpx;
		float: left;
		font-size: 26rpx;
		overflow: hidden;
	}

	.lease-title {
		height: 76rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.lease-attr {
		height: 68rpx;
		overflow: hidden;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.lease-price {
		float: right;
		font-size: 26rpx;
	}

	.lease-num {
		margin-top: 14rpx;
	}

	.lease-market-price {
		text-decoration: line-through;
	}

	.lease-now {
		color: #666
	}

	.font-color-hs {
		color: #999;
	}

	.order-handle-box {
		height: 75rpx;
		width: 100%;
		font-size: 26rpx;
	}

	.order-handle {
		height: 50rpx;
		width: auto;
		padding: 0 15rpx;
		border: 1rpx solid #999;
		text-align: center;
		line-height: 50rpx;
		border-radius: 5rpx;
		color: #6c6c6c;
		float: right;
		margin-right: 20rpx;
		margin-top: 13rpx;
	}

	.dopay {
		color: #fff;
		background: linear-gradient(to right, #f3587c, #ff7d5d);
		border: none;
		height: 53rpx;
		line-height: 52rpx;
	}

	.order-apply {
		display: inline-block;
		color: green
	}
	.m-no-data image{
		width: 100%;
		height: 100%;
	}
	.g-frame {
	    width: 581upx;
	    background: #fff;
	    border-radius: 20upx;
	    position: fixed;
	    top: 50%;
		margin-top: -35%;
	    overflow: hidden;
	    left: 12%;
		z-index: 12;
	}
	
	.g-frame-mask {
	    background: #000;
	    opacity: .5;
	    height: 100vh;
	    width: 100%;
	    position: fixed;
	    top: 0upx;
		z-index: 11;
	}
	
	.m-frame-header {
	    height: 110upx;
	    width: 100%;
	    background: #d71311;
	    border-top-right-radius: 20upx;
	    border-top-left-radius: 20upx;
		position: relative;
	}
	
	.u-frame-title {
	    width: 100%;
	    height: 100%;
	    text-align: center;
	    color: #fff;
	    line-height: 110upx;
	    font-size: 32upx;
	    float: left;
	}
	
	.u-frame-close {
	    position: absolute !important;
	    width: 42upx;
	    height: 42upx;
	    background-size: 100%;
	    top: 34upx;
	    right: 32upx;
	}
	
	.m-frame-content {
	    width: 90%;
		margin: 0 auto;
		padding: 40rpx 0;
	}
	.m-frame-content .express-content .input input{
		font-size: 32rpx;
		padding: 10rpx;
		border: 1px solid #CCCCCC;
		margin-bottom: 20rpx;
	}
	
	.m-frame-footer {
	    height: 97upx;
	    width: 100%;
	    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
	}
	
	.m-frame-footer view {
		flex: 1;
	    line-height: 97upx;
	    text-align: center;
	    font-size: 32upx;
	}
	.m-frame-footer .on{
		background: #CCCCCC;
	}
	.u-reset {
	    color: #ff0000;
	    background: #fff;
	}
	
	.u-confirm {
	    background: #d71311;
	    color: #fff;
	    border-bottom-right-radius: 16upx;
	}
</style>
